<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动与display</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        ul{
            width: 350px;
            height: 100px;
            margin: 50px;
            border: 1px solid aqua;
        }
        /* 想要将3个li标签进行水平排列
            display的缺点：
            1.会产生空格间隙
            2.会受到基线对齐的影响

            浮动 float
            浮动的可选值有两个
            1.left 将元素浮动到左边
            2.right 将元素浮动到右边

            浮动元素的特点：
            浮动元素最大的特点便是会脱离文档流
            是目前第一个会脱离文档流的布局方式
            脱离文档流：不会受到文档流的约束

            当元素浮动起来以后，它在文档流原有的位置将不存在，后续元素因为检测不到它的存在
            就会按照文档流的规则向上移动占据它原有的位置
                -浮动会提升元素的层级
                -浮动元素之间，能检检测到彼此的存在
                -多个浮动元素会在当前容器的浮动层级中按照浮动顺序进行排列
        */
        ul li{
            float: left;
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            background-color: skyblue;
        }
        .item1{
            background-color: rgba(135, 235, 217, 0.562);
        }
        .item2{
            background-color: rgb(135, 140, 235);
        }
        .item3{
            background-color: rgb(135, 150, 235);
        }
    </style>
</head>
<body>
    <ul>
        <li class="item1"></li>
        <li class="itme2"></li>
        <li class="item3"></li>
    </ul>
</body>
</html>